.table-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.cell-hover {
  transition: all 0.2s ease;
}
.cell-hover:hover {
  background-color: rgba(59, 130, 246, 0.05);
}
.expand-icon {
  transition: transform 0.2s ease;
}
.expand-icon.expanded {
  transform: rotate(90deg);
}
.editable-cell {
  position: relative;
}
.edit-overlay {
  position: absolute;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  z-index: 10;
}
.edit-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  outline: none;
}
.edit-controls {
  display: flex;
  gap: 0.5rem;
  margin-left: 0.5rem;
}
.edit-btn {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.edit-save {
  background-color: #3B82F6;
  color: white;
}
.edit-save:hover {
  background-color: #2563EB;
}
.edit-cancel {
  background-color: #E5E7EB;
  color: #4B5563;
}
.edit-cancel:hover {
  background-color: #D1D5DB;
}
.editing {
  background-color: rgba(59, 130, 246, 0.05);
}
.modified-value {
  color: #EF4444;
  position: relative;
}
.modified-value::after {
  content: '●';
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  font-size: 0.6rem;
  color: #EF4444;
}
.non-editable {
  background-color: #F3F4F6;
  cursor: not-allowed !important;
}
.tooltip {
  position: absolute;
  background-color: #333;
  color: white;
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  max-width: 300px;
  word-wrap: break-word;
}
.tooltip-visible {
  opacity: 1;
}
.add-button {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cell-hover:hover .add-button {
  opacity: 1;
}
#add-root-key {
  opacity: 0;
  transition: opacity 0.2s ease;
}
#add-root-key:hover, 
.cell-hover:hover .add-button {
  opacity: 1;
}
.delete-button {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cell-hover:hover .delete-button {
  opacity: 1;
}
.add-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 100;
  min-width: 300px;
}
.add-input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.5rem;
  outline: none;
  margin-bottom: 0.5rem;
}
.delete-confirmation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 100;
  min-width: 300px;
  color: #EF4444;
}
.success-animation {
  animation: success-pulse 1s ease-in-out;
}
.delete-animation {
  animation: delete-pulse 0.5s ease-in-out;
}
@keyframes success-pulse {
  0% { background-color: rgba(16, 185, 129, 0); }
  50% { background-color: rgba(16, 185, 129, 0.2); }
  100% { background-color: rgba(16, 185, 129, 0); }
}
@keyframes delete-pulse {
  0% { background-color: rgba(239, 68, 68, 0); }
  50% { background-color: rgba(239, 68, 68, 0.2); }
  100% { background-color: rgba(239, 68, 68, 0); }
}
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.search-container {
  position: relative;
}
.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
}
.search-input {
  padding-left: 2.5rem;
}
.search-result {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #6B7280;
  font-size: 0.875rem;
}
.highlight {
  background-color: #FEF3C7;
  font-weight: 600;
}
input#field-search {
    padding-left: 3rem !important;
}
  